<template>
    <div class="poster-wrap" v-if="showPoster">
        <div v-if="dataURL">
            <img :src="dataURL" alt="">
            <div class="saveTips">
                长按图片保存到相册
            </div>
            <div class="closePoster">
                <img class="btn" @click="closePoster" src="../assets/pop-close.png" alt="">
            </div>
        </div>
        <div v-else class="hideElments">
            <div ref="imageWrapper" class="poster-main" >
                <img @load="loadImgDone(posterBase64Img)" :src="posterBase64Img" crossOrigin="anonymous" alt="">
                <div class="poster-main-info">
                    <div class="userInfo">
                        <img :src="userAvatar" crossOrigin="anonymous" alt="">
                        <div>
                            <div>{{userName}}</div>
                            <div class="garyText">邀请您一起玩儿</div>
                        </div>
                    </div>
                    <div class="titleText">{{posterInfo.title}}</div>
                    <div class="qrcodeInfo">
                        <div>
                            <div class="price">¥ {{posterInfo.person_price_cny}}/人</div>
                            <div>快帮行--体验美好旅行生活</div>
                        </div>
                        <img :src="qrcodeImg" alt="">
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import qrcode from 'qrcode'
    import html2canvas from 'html2canvas'
    import storage from "../store/localstorage"
    import { Indicator } from 'mint-ui';
    export default {
        name: "poster",
        data(){
            return{
                posterBase64Img: '',
                userAvatar: '',
                userName: storage.get('userinfo') ? storage.get('userinfo').member_nickname : '快帮行',
                qrcodeImg: '',
                dataURL: ''
            }
        },
        watch:{
            showPoster: function(newVal,oldVal){
                if(newVal && !this.dataURL){
                    window.scrollTo(0,0);
                    Indicator.open({
                        text: '海报生成中',
                        spinnerType: 'fading-circle'
                    });
                }
            },
            posterInfo: function(newVal,oldVal){
                let that = this;
                if(newVal && newVal.posterImg){
                    let imgUrl = newVal.posterImg+'?t='+new Date().getTime();
                    that.convertImgToBase64(imgUrl, function(base64Img) {
                        // Base64DataURL
                        console.log("base64提前处理跨域图片")
                        that.posterBase64Img = base64Img;
                    });
                }
            }
　　　　　},
        props:['posterInfo','showPoster'],
        mounted(){
            let that = this;
            if(storage.get('userinfo')){
                that.convertImgToBase64(storage.get('userinfo').img, function(base64Avatar) {
                    console.log("base64提前处理用户头像图片")
                    that.userAvatar = base64Avatar;
                });
            }else{
                that.userAvatar = require('../assets/user-avatar.png');
            }
        },
        
        methods:{
            closePoster(){
                this.$emit('closePoster',false);
            },
            loadImgDone(imgUrl){
                if(!imgUrl){
                    return;
                }

                console.log("banner图片加载完成")
                let that = this;
                qrcode.toDataURL(location.href).then(url => {
                    this.qrcodeImg = url;
                    let loadImg = new Image();
                    loadImg.src = url;
                    loadImg.onload = function() {
                        html2canvas(that.$refs.imageWrapper,{
                            // useCORS: true,
                            backgroundColor: null //避免图片有白色边框
                        }).then((canvas) => {

                            let dataURL = canvas.toDataURL("image/png");
                            that.dataURL = dataURL;
                            Indicator.close();
                            console.log("海报生成完成")
                        })
                    }
                   
                })
                .catch(err => {
                    console.error(err)
                })
            },
            convertImgToBase64(url, callback, outputFormat) {
                let canvas = document.createElement('CANVAS'),
                ctx = canvas.getContext('2d'),
                img = new Image;
                img.crossOrigin = 'Anonymous';
                img.onload = function() {
                    canvas.height = img.height;
                    canvas.width = img.width;
                    ctx.drawImage(img, 0, 0);
                    let dataURL = canvas.toDataURL(outputFormat || 'image/png');
                    callback.call(this, dataURL);
                    canvas = null;
                };
                img.src = url;
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .poster-wrap{
        position: fixed;
        background: rgba(0,0,0,.5);
        top:0;
        right: 0;
        bottom: 0;
        left:0;
        z-index: 9999;
        display: flex;
        align-items: center;
        padding: 0 rpx(30);
        color: #333;
    }
    .saveTips{
        text-align: center;
        margin: rpx(20) 0;
        color: #fff;
        .closePosterBtn{
            
            width: rpx(80);
            height: rpx(80);
            cursor: pointer;
            display: inline-block;
            margin: 0 auto;
        }
    }
    .closePoster{
        text-align: center;
        .btn{
            width: rpx(80);
            height: rpx(80);
            cursor: pointer;
            display: inline-block;
            margin: 0 auto;
        }
    }
    .hideElments{
        opacity: 0;
    }
    .poster-main{
        background: #fff;
        .poster-main-info{
            padding: rpx(20);
        }
        .userInfo{
            display: flex;
            align-items: center;
            img{
                width: rpx(150);
                height: rpx(150);
                border-radius: 50%;
                margin-right: rpx(20);
            }
            .garyText{
                color: #999;
                margin-top: rpx(10);
            }
        }
        .titleText{
            margin: rpx(20) 0;
            font-weight: 500;
        }
        .qrcodeInfo{
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ff7d01;
            .price{
                font-weight: bolder;
                margin-bottom: rpx(15);
            }
            img{
                width: rpx(180) ;
                height: rpx(180);
            }
        }
    }
</style>
